<script setup>
import {
    Edit,
    Search,
    Warning,
    Goods
} from '@element-plus/icons-vue'

import { ref } from 'vue'

//商品列表数据模型
const goods = ref([])
const count1 = ref(0)
const goods2 = ref([])
const count2 = ref(0)
// 查询商品列表
import { getGoodsExpireService, getGoodsStockService } from '@/api/goods.js'
// 获取过期商品列表
const echoGoodsList = async () => {
    let res = await getGoodsExpireService()
    console.log("过期列表：", res)
    //渲染商品列表
    goods.value = res.data
    //计算过期商品数量
    count1.value = res.data.length
}
echoGoodsList()
// 获取库存不足商品列表
const echoGoodsStockList = async () => {
    let res = await getGoodsStockService({
        pageNum: 1,
        pageSize: 1000,
        category: null,
        vendorId: null,
        goodsName: null,
    })
    console.log("库存不足列表：", res)
    //渲染商品列表
    goods2.value = res.data.items
    //计算过期商品数量
    count2.value = res.data.items.length
}
echoGoodsStockList()

// 判断是否过期
const isExpired = (date) => {
    return new Date(date) < new Date()
}

</script>
<template>
    <div class="home-container">
        <!-- 欢迎区域 -->
        <div class="welcome-section">
            <div class="welcome-content">
                <h1>欢迎使用超市库存管理系统</h1>
                <p>高效管理您的库存，提升运营效率</p>
            </div>
            <div class="quick-stats">
                <div class="stat-card warning">
                    <el-icon><Warning /></el-icon>
                    <div class="stat-info">
                        <div class="stat-value">{{ count1 }}</div>
                        <div class="stat-label">待处理商品</div>
                    </div>
                </div>
                <div class="stat-card danger">
                    <el-icon><Goods /></el-icon>
                    <div class="stat-info">
                        <div class="stat-value">{{ count2 }}</div>
                        <div class="stat-label">库存不足</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 数据展示区域 -->
        <div class="data-section">
            <!-- 临期商品卡片 -->
            <el-card class="data-card" shadow="hover">
                <template #header>
                    <div class="card-header">
                        <span class="title">临期商品预警</span>
                        <el-tag type="warning" effect="dark">{{ count1 }}个待处理</el-tag>
                    </div>
                </template>
                <el-table 
                    :data="goods" 
                    style="width: 100%"
                    :max-height="300"
                    border
                    stripe
                >
                    <el-table-column prop="goodsName" label="商品名称" min-width="150" />
                    <el-table-column prop="produceDate" label="生产日期" width="120" />
                    <el-table-column prop="overdueDate" label="过期日期" width="120" />
                    <el-table-column label="状态" width="100">
                        <template #default="{ row }">
                            <el-tag :type="isExpired(row.overdueDate) ? 'danger' : 'warning'">
                                {{ isExpired(row.overdueDate) ? '已过期' : '即将过期' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

            <!-- 库存不足卡片 -->
            <el-card class="data-card" shadow="hover">
                <template #header>
                    <div class="card-header">
                        <span class="title">库存不足预警</span>
                        <el-tag type="danger" effect="dark">{{ count2 }}个待处理</el-tag>
                    </div>
                </template>
                <el-table 
                    :data="goods2" 
                    style="width: 100%"
                    :max-height="300"
                    border
                    stripe
                >
                    <el-table-column prop="goodsName" label="商品名称" min-width="150" />
                    <el-table-column prop="inventory" label="当前库存" width="100">
                        <template #default="{ row }">
                            <span :class="{ 'low-stock': row.quantity < 10 }">{{ row.quantity }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注信息" min-width="150" show-overflow-tooltip />
                </el-table>
            </el-card>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.home-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;

    .welcome-section {
        background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
        border-radius: 8px;
        padding: 30px;
        margin-bottom: 20px;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .welcome-content {
            h1 {
                font-size: 28px;
                margin: 0 0 10px 0;
                font-weight: 600;
            }

            p {
                font-size: 16px;
                margin: 0;
                opacity: 0.8;
            }
        }

        .quick-stats {
            display: flex;
            gap: 20px;

            .stat-card {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                padding: 20px;
                display: flex;
                align-items: center;
                gap: 15px;
                backdrop-filter: blur(10px);

                .el-icon {
                    font-size: 32px;
                }

                .stat-info {
                    .stat-value {
                        font-size: 24px;
                        font-weight: bold;
                        line-height: 1;
                    }

                    .stat-label {
                        font-size: 14px;
                        opacity: 0.8;
                        margin-top: 5px;
                    }
                }

                &.warning {
                    background: rgba(250, 173, 20, 0.1);
                }

                &.danger {
                    background: rgba(255, 77, 79, 0.1);
                }
            }
        }
    }

    .data-section {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
        gap: 20px;

        .data-card {
            .card-header {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .title {
                    font-size: 16px;
                    font-weight: bold;
                }
            }

            .low-stock {
                color: #f56c6c;
                font-weight: bold;
            }
        }
    }
}
</style>